<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <title>文章修改</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eff2f5;
            overflow: hidden;
        }

        .top {
            height: 60px;
            background-color: white;
            box-shadow: 4px 4px 4px #ccc;

        }


        .zhenPage {
            width: 1250px;
            height: 540px;
            margin: auto;
            margin-top: 30px;
            position: relative;
        }

        #photo {
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
        }

        .imgPreview {
            width: 100%;
            height: 100%;
            background-size: 100%;
            background-image: url(imgs/tianjia.png);
        }

        .imgPreview img {
            width: 100%;
            height: 100%;
        }

        .inputYanshi {
            height: 150px;
            margin-bottom: 50px;
            overflow: hidden;
        }

        .inputYanshi input {
            float: right;
            width: 86%;
        }

        .fileYanshi {
            width: 12%;
            height: 100%;
            /* border: 2px solid black; */
            position: relative;
            float: left;
        }

        #increase {
            width: 90px;
            position: absolute;
            bottom: 20px;
            right: 30px;
            z-index: 10;
        }
    </style>
</head>

<body>



    <div class="top">

    </div>

    <div class="zhenPage">
        {{each result item}}
        <div class="inputYanshi">

            <div class="fileYanshi">
                <input type="file" id="photo">

                <div class="imgPreview">
                    <img alt="" id="preview" src="{{item.img}}">
                </div>
            </div>


            <input type="text" id="title" value="{{item.title}}" required lay-verify="required" placeholder="标题"
                autocomplete="off" class="layui-input"> <!-- 标题 -->

            <input type="text" id="author" value="{{item.author}}" required lay-verify="required" placeholder="作者"
                autocomplete="off" class="layui-input"> <!-- 作者 -->

            <input type="text" id="toExamine" value="{{item.status}}" required lay-verify="required" placeholder="审核状态"
                autocomplete="off" class="layui-input"> <!-- 审核状态 -->

            <input type="text" id="cat_id" value="{{item.cat_id}}" required lay-verify="required" placeholder="分类"
                autocomplete="off" class="layui-input"> <!-- 分类 -->

            <input type="text" id="time" value="{{item.time}}" required lay-verify="required" autocomplete="off" class="layui-input"
                style="display: none;"> <!-- 发布时间 隐藏 -->

        </div>
        <div id="content" style="position: absolute;z-index: 1;width: 100%;">


        </div>
        <button id="increase" type="button" class="layui-btn layui-btn-normal">修改</button>


        {{/each}}

    </div>

</body>


<script src="/layer/layer.js"></script>
<script src="/layui/layui.js"></script>

<script src="/wangEditor.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>

    const E = window.wangEditor
    const editor = new E('#content')
    // 或者 const editor = new E( document.getElementById('div1') )

    editor.create()

    editor.txt.html($('<div>').html('{{result[0].content}}').text())


        photo.onchange = function (event) {
                    // 获取文件的上传列表
                    let file = this.files[0]

                    //new FileReader()用来把二进制图像转成base64
                    let filereader = new FileReader()

                    //readAsDataURL() 是FileReader()之中的一个读取二进制文件并转化为base64的方法
                    filereader.readAsDataURL(file);  //读取了file并转化成base64

                    // 如果不给filereader设置onload而直接给preview赋值会因为filereader还没有值而报错,所以得等filereader有值了之后,也就是onload事件触发了才给preview赋值
                    filereader.onload = function (e) {
                        //this.result是filereader的base64
                        preview.src = this.result
                        preview.style.backgroundColor = "white"
                    }
                }


        increase.onclick = function () {



        // 创建一个formData表单对象，此对象设置数据可以通过aj+ax的send发送给服务器
        let formData = new FormData()

        let file = photo.files[0]; // 文件二进制数据
        // 追加数据
        formData.append('title', title.value)
        formData.append('img', preview.src)
        formData.append('author', author.value)
        formData.append('content', editor.txt.html())
        formData.append('status', toExamine.value)
        formData.append('cat_id', cat_id.value)
        formData.append('time', time.value)
        formData.append('gaiid', "{{result[0].id}}")
        // 发送ajax -post请求
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {

        }
        xhr.open('post', '/gaichen', true)
        // console.log(title.value);
        // console.log(file);
        // console.log(author.value);
        // console.log(editor.txt.html());
        // console.log(toExamine.value);
        // console.log(cat_id.value);
        // console.log(time.value);
        if (title.value != "" && file != "" && author.value != "" && editor.txt.html() != "" && toExamine.value != "" && cat_id.value != "" && time.value != "") {
            xhr.send(formData)
            layer.msg('添加成功', { icon: 1 })


        }


    }


</script>


</html>